<template>
  <div>
      <template><headpage></headpage></template>
      <div style="width:100%;padding-top:60px;"></div>
      <div class="m10" v-if="post != null">
          <div>
              <div>
                  <div class="post-title"><p>{{post.title}}</p></div>
                  <div class="post-date-name">
                    <p>{{post.ctime | formatDate}} 
                        <span>{{post.name}}</span>/<a href="javascript:void(0)" @click="atThis(post.name)">@Ta</a>
                    </p>
                  </div>
              </div>
              <div class="content" @click="appendHtmlClick" v-html="post.content"></div>
              <div class="post-reply">
                  <p>评论</p>
                  <textarea id="replyInput" v-model="replyVal" placeholder="输入评论"></textarea>
                  <p style="text-align: right;margin-right: 10%;">
                    <a href="javascript:void(0)" style="" @click="showFace">表情</a>
                    <button class="login-button" v-on:click="submitReply">提交</button>
                  </p>
              </div>
              <div style="min-height:100px;float: left;" v-bind:class="{'show-face':isShowFace}">
                    <ul class="ul-none" style="list-style: none;">
                        <li v-for="(item,index) in face" @click="chooseFace(item)">
                            <img :src="item.url" />
                        </li>
                    </ul>
                </div>
              <div class="post-replys" >
                  <div class="post-replys-item" v-for="item in replys">
                      <p class="post-replys-name">
                        <span style="font-size:16px;">{{item.floor}}. </span>{{item.uinfo.name}}/<a href="javascript:void(0)" @click="atThis(item.uinfo.name)">@Ta</a>
                        <span> {{item.ctime | formatDate}}</span>
                      </p>
                      <div class="post-replys-content" @click="appendHtmlClick" v-html="item.content"></div>
                  </div>
              </div>
              <div style="text-align: center;margin:20px 0 0 0;">
                  <a href="javascript:void(0)" v-show="replys.length <= (countReplys-1)" v-on:click="loadMoreReplys">
                    <span>加载更多(共{{countReplys}}条,未展开{{countReplys - replys.length}}条)</span>
                  </a>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import Vue from 'vue'
import Head from './childPage/Head'
// import Loading from './plug/Loading'
export default {
  components: {
      headpage:Head
    //   loading:Loading
  },
  data () {
      return {
        isShowFace:true,
        face:{
            'bgx':{
                val:'{不高兴}',
                url: g.url + '/tpl/classic/img/face/e4b88de9ab98e585b4.gif'
            },
            'guai':{
                val:'{乖}',
                url: g.url + '/tpl/classic/img/face/e4b996.gif'
            },
            'leng':{
                val:'{冷}',
                url: g.url + '/tpl/classic/img/face/e586b7.gif'
            },
            'mq':{
                val:'{勉强}',
                url: g.url + '/tpl/classic/img/face/e58b89e5bcba.gif',
            },
            'ts':{
                val:'{吐舌}',
                url: g.url + '/tpl/classic/img/face/e59090e8888c.gif'
            },
            'tu':{
                val:'{吐}',
                url: g.url + '/tpl/classic/img/face/e59090.gif'
            },
            'hehe':{
                val:'{呵呵}',
                url: g.url + '/tpl/classic/img/face/e591b5e591b5.gif'
            },
            'hu':{
                val:'{呼}',
                url: g.url + '/tpl/classic/img/face/e591bc.gif'
            },
            'yi':{
                val:'{咦}',
                url: g.url + '/tpl/classic/img/face/e592a6.gif'
            },
            'haha':{
                val:'{哈哈}',
                url: g.url + '/tpl/classic/img/face/e59388e59388.gif'
            },
            'a':{
                val:'{啊}',
                url: g.url + '/tpl/classic/img/face/e5958a.gif'
            },
            'pen':{
                val:'{喷}',
                url: g.url + '/tpl/classic/img/face/e596b7.gif'
            },
            'tkx':{
                val:'{太开心}',
                url: g.url + '/tpl/classic/img/face/e5a4aae5bc80e5bf83.gif'
            },
            'wq':{
                val:'{委屈}',
                url: g.url + '/tpl/classic/img/face/e5a794e5b188.gif'
            },
            'kx':{
                val:'{开心}',
                url: g.url + '/tpl/classic/img/face/e5bc80e5bf83.gif'
            },
            'nu':{
                val:'{怒}',
                url: g.url + '/tpl/classic/img/face/e68092.gif'
            },
            'jk':{
                val:'{惊哭}',
                url: g.url + '/tpl/classic/img/face/e6838ae593ad.gif'
            },
            'jy':{
                val:'{惊讶}',
                url: g.url + '/tpl/classic/img/face/e6838ae8aeb6.gif'
            },
            'han':{
                val:'{汗}',
                url: g.url + '/tpl/classic/img/face/e6b197.gif'
            },
            'lei':{
                val:'{泪}',
                url: g.url + '/tpl/classic/img/face/e6b3aa.gif'
            },
            'hj':{
                val:'{滑稽}',
                url: g.url + '/tpl/classic/img/face/e6bb91e7a8bd.gif'
            },
            'kh':{
                val:'{狂汗}',
                url: g.url + '/tpl/classic/img/face/e78b82e6b197.gif'
            },
            'yw':{
                val:'{疑问}',
                url: g.url + '/tpl/classic/img/face/e79691e997ae.gif'
            },
            'zb':{
                val:'{真棒}',
                url: g.url + '/tpl/classic/img/face/e79c9fe6a392.gif'
            },
            'sj':{
                val:'{睡觉}',
                url: g.url + '/tpl/classic/img/face/e79da1e8a789.gif'
            },
            'xy':{
                val:'{笑眼}',
                url: g.url + '/tpl/classic/img/face/e7ac91e79cbc.gif'
            },
            'hx':{
                val:'{花心}',
                url: g.url + '/tpl/classic/img/face/e88ab1e5bf83.gif'
            },
            'bs':{
                val:'{鄙视}',
                url: g.url + '/tpl/classic/img/face/e98499e8a786.gif'
            },
            'ku':{
                val:'{酷}',
                url: g.url + '/tpl/classic/img/face/e985b7.gif'
            },
            'qian':{
                val:'{钱}',
                url: g.url + '/tpl/classic/img/face/e992b1.gif'
            },
            'yx':{
                val:'{阴险}',
                url: g.url + '/tpl/classic/img/face/e998b4e999a9.gif'
            },
            'hx':{
                val:'{黑线}',
                url: g.url + '/tpl/classic/img/face/e9bb91e7babf.gif'
            }
        },
        replyIsLogin:false, //服务端返回数据判断是否登录
        token:'',
        topicId:'',
        replyVal:'',//回复内容
        post:null, //帖子内容
        replys:[], //帖子回复
        pageIndex:1,//回复列表的index
        loadTab:0,//加载标记 0-没有进行加载，1-正在进行加载，2-重复点击进行alert提示
        countReplys:0 //帖子回复数量
      }
  },
  created:function () {
      let topicId = this.$route.params.topicId;
      this.topicId = topicId;
      let title = this.$route.query.title;
      document.title = title;
      this.InitData(topicId);
  },
  methods:{
    //初始化页面数据
    InitData:function(topicId){
        let self = this;
        self.$lay.loading(1,0);
        let url;
        if(g.sid){
            url = 'q.php/'+g.sid+'/bbs.topic.'+topicId+'.json?_origin=*';
        }else{
            url = 'q.php/bbs.topic.'+topicId+'.json?_origin=*';
        }
        self.$http.get(url).then(function(res){
            if(res.status == 200){
                self.$lay.loading(-1);
                console.log(res);
                let data = res.data;
                self.replyIsLogin = data.isLogin;
                self.token = data.token;
                self.countReplys = (data.floorCount - 1);//楼主发送的内容也算是一个回复数据
                let tMeta = data.tMeta;//帖子标题信息
                let tContents = data.tContents; //帖子回复信息（包括帖子内容）
                tContents.forEach(function(item,index) {
                    if(index == 0){
                        // tMeta.content = item.content;
                        tMeta.content = self.$util.str2html(item.content).prop("outerHTML");
                        tMeta.name = item.uinfo.name;
                        self.post=tMeta;
                        if(tMeta){
                            self.PageTitle(tMeta.title);
                        }
                    }else{
                        item.content = self.$util.str2html(item.content).prop("outerHTML");
                        self.replys.push(item);
                    }
                });
            }
        }).catch(function(e){
            self.$lay.toast('出错了', 2000);
            console.log(e);
        });
    },
    //命名网页标题
    PageTitle:function(title){
        document.title = title;
    },
    //提交回复
    submitReply:function(){
        let self = this;
        if(!self.replyIsLogin && !self.isLogin){
            self.$lay.toast('您还没有登录或sid已经失效！', 2000);
            return false;
        }
        let replyVal = self.replyVal;
        let form = new FormData();
        form.append('content',replyVal);
        form.append('token',self.token);
        form.append('go','评论该帖子');
        self.$lay.loading(-1);
        self.$http.post('q.php/'+g.sid+'/bbs.newreply.'+self.topicId+'.1.json?_origin=*',form).then(function(res){
            if(res.status == 200){
                self.$lay.loading(-1);
                if(res.data.success){
                    self.$lay.toast('回复成功！', 2000);
                    self.$router.go(0);
                }else{
                    self.$lay.toast(res.data.notice, 2000);
                    return false;
                }
            }
        }).catch(function(e){
            self.$lay.toast('出错啦', 2000);
            console.log(e);
        });
    },
    // agent: function(el,ee,eee,rr){
    //     debugger
    // },
    //加载更多回复
    loadMoreReplys:function(){
        let self = this;
        self.$lay.loading(1,0);
        let url;
        self.loadTab ++;//正在加载标记
        if(self.loadTab > 1){
            self.$lay.toast('手速太快啦！', 2000);
            return;
        }
        if(g.sid){
            url = 'q.php/'+g.sid+'/bbs.topic.'+self.topicId+'.'+(self.pageIndex+1)+'.json?_origin=*';
        }else{
            url = 'q.php/bbs.topic.'+self.topicId+'.'+(self.pageIndex+1)+'.json?_origin=*';
        }
        self.$http.get(url).then(function(res){
            if(res.status == 200){
                self.$lay.loading(-1);
                let data = res.data;
                let replyAll = self.replys.concat(data.tContents);
                Vue.set(self,'replys',replyAll);
                console.log(data);
                self.loadTab=0;//复位
                self.pageIndex++;
            }
        });
    },
    /**
     * 选择表情
     */
    chooseFace: function(item){
        this.replyVal = this.replyVal + item.val;
    },
    showFace: function(){
        if(this.isShowFace){
            this.isShowFace = false;
        }else{
            this.isShowFace = true;
        }
        
    },
    atThis: function(name){
        this.replyVal = this.replyVal +'@' + name + '，'
        // atAdd(name,'');
    },
    appendHtmlClick: function(){
      let url = this.$util.getHref();
    }
  }
}
</script>
<style scoped>
</style>
